<template>
  <div class='container'>
    <!-- Card 卡片 -->
    <el-card class="box-card">
      <!-- 头部新增试题 -->
      <el-row type="flex" class="row-bg" justify="space-between" align="flex-start">
        <el-col :span="6">
          <div class="grid-content bg-purple" style="color:#ffc0cb;font-size:12px;">说明：目前支持学科和关键字条件筛选</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button class="addques"  type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 基础题库 Form表单 -->
      <el-form ref="form" :model="questionsListForm" label-width="80px">
        <!-- 表单第一行 -->
        <el-row :gutter="20">
          <!-- 学科 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="学科">
                <el-select v-model="questionsListForm.subjectID" placeholder="请选择" @change="changeFn">
                  <el-option :label="obj.subjectName" :value="obj.id" v-for="obj in subjectList" :key="obj.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="二级目录">
                <el-select v-model="questionsListForm.catalogID" placeholder="请选择">
                  <el-option :label="obj.directoryName" v-for="obj in directoryNamesList" :key="obj.id" :value="obj.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="标签">
                <el-select v-model="questionsListForm.tags" placeholder="请选择">
                  <el-option :label="obj.tagName" v-for="obj in tagsList" :key="obj.id" :value="obj.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="关键字">
                <el-input v-model.lazy.trim="questionsListForm.keyword" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 表单第二行 -->
        <el-row :gutter="20">
          <!-- 试题类型 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="试题类型">
                <el-select v-model="questionsListForm.questionType" placeholder="请选择">
                  <el-option :label="obj.label" :value="obj.value" v-for="obj,index in questionType" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 试题难度 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="难度">
                <el-select v-model="questionsListForm.difficulty" placeholder="请选择">
                  <el-option :label="obj.label" :value="obj.value" v-for="obj,index in difficulty" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="方向">
                <el-select v-model="questionsListForm.direction" placeholder="请选择">
                  <el-option :label="item" :value="item" v-for="item,index in direction" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="录入人">
                <el-select v-model="questionsListForm.creatorID" placeholder="请选择">
                  <el-option :label="obj.value" :value="obj.id" v-for="obj in creators" :key="obj.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <!-- 表单第三行 -->
        <el-row :gutter="20">
          <!-- 题目备注 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="题目备注">
                <el-input v-model="questionsListForm.remarks"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="企业简称">
                <el-input v-model="questionsListForm.shortName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="城市">
                <el-row>
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <el-select v-model="questionsListForm.province" placeholder="请选择" @change="selectProvinces">
                        <el-option :label="item" :value="item" v-for="item,index in totalProvinces" :key="index">
                        </el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <el-select v-model="questionsListForm.city" placeholder="请选择">
                        <el-option :label="item" :value="item" v-for="item,index in citysList" :key="index"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>

              </el-form-item>
            </div>
          </el-col>
          <!-- 清除 搜索 -->
          <el-col :span="6">
            <el-row type="flex" class="row-bg" justify="end">

              <div class="grid-content bg-purple elRight">
                <el-button @click="clearFormData">清除</el-button>
                <el-button type="primary" @click="searchQuestionFn">搜索</el-button>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!-- Alert 警告 -->
      <el-alert type="info" show-icon :closable="false">
        数据一共{{total}}条
      </el-alert>

      <!-- Table 表格 -->
      <el-table :data="questionsTableData" style="width: 100%">
        <el-table-column label="试题编号" width="210" prop="number">
        </el-table-column>
        <el-table-column label="学科" width="50" prop="subject">
        </el-table-column>
        <el-table-column label="目录" width="80" prop="catalog">
        </el-table-column>
        <el-table-column label="题型" width="70" prop="questionType" :formatter="formatterQuestionType">
        </el-table-column>
        <el-table-column label="题干" width="200" prop="question" :formatter="formatterQuestion">
        </el-table-column>
        <el-table-column label="录入时间" width="170" prop="addDate" :formatter="formatterTime">
        </el-table-column>
        <el-table-column label="难度" min-width="0" prop="difficulty" :formatter="formatterDifficulty">
        </el-table-column>
        <el-table-column label="录入人" width="100" prop="creator">
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <!-- 预览 -->
            <!-- :offset="20"
            lacement="bottom-start" -->
            <!-- :visible-arrow="false" -->
            <!-- :open-delay="1000" -->
            <el-tooltip
            :open-delay="500"
            popper-class="atooltip"
               :enterable="false"   content="预览"  effect="light">
                <el-button circle type="primary" plain icon="el-icon-view" @click="previewQuestionFn(scope.row.id)"></el-button>
            </el-tooltip>

            <!-- 修改 -->
            <el-tooltip
            :open-delay="500" :enterable="false"  content="修改"  effect="light">
                <el-button type="success" icon="el-icon-edit" circle plain
              @click="$router.push(`/questions/new?id=${scope.row.id}`)"></el-button>
            </el-tooltip>

            <!-- 删除 -->
            <el-tooltip
            :open-delay="500" :enterable="false"  content="删除"  effect="light">
                <el-button type="danger" icon="el-icon-delete" circle plain @click="delQuestionByIdFn(scope.row)">
            </el-button>
            </el-tooltip>
            <!-- 加入精选 -->
            <el-tooltip
            :open-delay="500" :enterable="false" content="加入精选"  effect="light">
                <el-button type="warning" icon="el-icon-check" circle plain @click="confirmAddQuestionChoiceFn(scope.row)">
            </el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

      <!-- Pagination 分页 -->
      <el-row class="row-bg">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="query.page" :page-sizes="[5, 10, 20, 50]" :page-size="query.pagesize"
          layout="prev, pager, next, sizes, jumper" :total="total">
        </el-pagination>

      </el-row>

      <!-- 题目预览 弹窗 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
        :close-on-press-escape="false" @close="closeVideo"
        @open="openDialog"
        >
        <QuestionsPreview ref="questionsPreview" @closeDialog="closeQuestionsDialog" :subjectDetail="subjectDetail" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 导入 html转文字工具函数 和 格式化时间 工具函数
import {
  html2Text,
  parseTime
} from '@/utils'
  // 导入 弹窗组件
import QuestionsPreview from '../components/questions-preview.vue'
// 导入 获取标签列表 接口API
import {
  list as tagsList
} from '@/api/hmmm/tags'
  // 导入 获取目录列表 接口API
import {
  list as directorysList
} from '@/api/hmmm/directorys'
  // 导入 基础题库列表 接口API
import {
  list as questionsList,
  remove as removeQuestionsById,
  choiceAdd as questionChoice,
  detail as detailQuestion
} from '@/api/hmmm/questions.js'
  // 导入 获取 用户列表
  // import { list as userList } from '@/api/base/users.js'
  // 导入 学科列表 接口API
import {
  list as subjectsList
  //   detail as subjectDetailById
} from '@/api/hmmm/subjects'
  // 导入 试题类型
import {
  questionType,
  difficulty,
  direction
} from '@/api/hmmm/constants.js'
  // 城市 城区
import {
  provinces,
  citys
} from '@/api/hmmm/citys'
export default {
  name: 'Questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 基础题库列表 Form 表单
      questionsListForm: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 试题难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null,
        city: null // 城市
      },
      subjectList: [], // 学科列表
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      totalProvinces: provinces(), // 所有城市
      //   citys: citys(), // 城市下地区
      questionsTableData: [], // 基础题库列表 Table列表
      total: 0, // 总题数
      // 分页
      query: {
        page: 1, // 当前页
        pagesize: 5 // 每页数据条数
      },
      // 当前学科二级目录
      directoryNamesList: [],
      // 当前学科标签列表
      tagsList: [],
      subjectDetail: {}, // 当前文章详情
      citysList: [], // 城市下城区数据
      // 录入人
      creators: [{
        id: 1,
        value: '录入管理员'
      },
      {
        id: 2,
        value: '超级管理员'
      }
      ],
      // 弹窗显示与隐藏
      dialogVisible: false,
      // 当前题型id
      questionId: 0
    }
  },
  created () {
    // 调用 获取 学科列表 方法
    this.getSubjectsListFn()

    // 调用 获取基础题库列表 方法
    this.getQuestionsListFn()
  },
  methods: {
    //
    openDialog () {
      this.$nextTick(() => this.$refs.questionsPreview.getQuestionDetail())
    },
    // 学科下拉菜单, 下拉事件 || 获取二级目录列表和标签
    async changeFn (id) {
      // 调用 获取目录列表 接口 API
      const res = await directorysList()

      // 根据当前学科id 获取到当前二级目录数据项
      this.directoryNamesList = res.data.items.filter(item => item.subjectID === id)

      // 调用 获取标签列表 接口API
      const res1 = await tagsList()

      // 根据当前学科id 获取到当前标签数据项
      this.tagsList = res1.data.items.filter(item => item.subjectID === id)

      // 将二级目录和标签置空
      this.questionsListForm.catalogID = ''
      this.questionsListForm.tags = ''
    },

    // 获取 学科列表 方法
    async getSubjectsListFn () {
      // 调用获取学科列表 接口API
      const res = await subjectsList({
        page: 1,
        pagesize: 15
      })
      //   console.log(res)

      // 赋值学科列表数据
      this.subjectList = res.data.items
    },

    // 点击清除按钮 清空搜索数据
    clearFormData () {
      this.questionsListForm = {
        // subjectID: '', // 学科
        // catalogID: '', // 目录
        // tags: '', // 标签
        // keyword: '', // 关键字
        // questionType: '', // 试题类型
        // difficulty: '', // 试题难度
        // direction: '', // 方向
        // creatorID: '', // 录入人
        // remarks: '', // 题目备注
        // shortName: '', // 企业简称
        // city: '' // 城市
      }

      // 调用 获取基础题库列表 方法
      this.getQuestionsListFn()
    },

    // 每页条数 改变时会触发
    handleSizeChange (newPagesize) {
      // 赋值每页条数
      this.query.pagesize = newPagesize

      // 调用 获取基础题库列表 方法
      this.getQuestionsListFn()
    },

    // 当前页 改变时会触发
    handleCurrentChange (newPage) {
      // 赋值当前页
      this.query.page = newPage

      // 调用 获取基础题库列表 方法
      this.getQuestionsListFn()
    },

    // 获取 基础题库列表 方法
    async getQuestionsListFn () {
      // 调用 获取 基础题库列表 接口 API
      const res = await questionsList({ ...this.query, ...this.questionsListForm })
      //   console.log(res)

      // 赋值 基础题库列表 Table列表
      this.questionsTableData = res.data.items

      // 赋值 总题数
      this.total = res.data.counts
    },

    // 格式化处理 题型
    formatterQuestionType (row, column, cellValue, index) {
      const res = this.questionType.find(item => item.value === cellValue * 1)

      return res ? res.label : '未知'
    },

    // 格式化处理 难度
    formatterDifficulty (row, column, cellValue, index) {
      const res = this.difficulty.find(item => item.value === cellValue * 1)

      return res ? res.label : '未知'
    },

    // 格式化题干
    formatterQuestion (row, column, cellValue, index) {
      const res = html2Text(cellValue)
      return res
    },

    // 格式化时间
    formatterTime (row, column, cellValue, index) {
      // 调用导入的工具函数
      const res = parseTime(cellValue)
      return res
    },

    // 根据城市获取城市下地区
    selectProvinces (value) {
      this.citysList = citys(value)

      // 切换城市 置空城区
      this.questionsListForm.city = ''
    },

    // 点击预览题目 || 父传子 传递当前数据详情
    async previewQuestionFn (id) {
      console.log(id)
      // 显示弹窗
      this.dialogVisible = true

      // 根据id找到当前数据项
      this.subjectDetail = this.questionsTableData.find(item => item.id === id)

      // 调用 获取题库详情接口API
      const res = await detailQuestion(this.subjectDetail)
      console.log(res)

      // 父传子 传递当前数据id
      this.subjectDetail = res.data
      this.questionId = id
    },

    // 关闭弹窗的时候,关闭视频答案预览
    closeVideo () {
      this.$refs.questionsPreview.videoIsShow = false
    },

    // 子传父 || 关闭弹出层
    closeQuestionsDialog () {
      // 关闭 弹出层
      this.dialogVisible = false
    },

    // 点击删除按钮  删除试题
    async delQuestionByIdFn (obj) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用 根据id 删除试题 接口API
        const res1 = await removeQuestionsById(obj)
        console.log(res1)

        // 判断是否是当前页的最后一条数据
        if (this.questionsTableData.length === 1) {
          this.query.page--
          if (this.query.page <= 0) {
            this.query.page = 1
          }
        }

        // 删除成功消息提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })

        // 调用 获取基础题库列表 方法
        this.getQuestionsListFn()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 点击加入精选
    async confirmAddQuestionChoiceFn (obj) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        obj.choiceState = 1
        // 判断是否是当前页的最后一条数据
        if (this.questionsTableData.length === 1) {
          this.query.page--
          if (this.query.page <= 0) {
            this.query.page = 1
          }
        }
        // 调用接口
        await questionChoice(obj)

        // 加入成功消息提示
        this.$message.success('加入精选成功')

        // 调用 获取基础题库列表 方法
        this.getQuestionsListFn()

        // 跳转到精选题库
        this.$router.push('/questions/choice')
      } catch (error) {
        //
        this.$message('取消加入精选')
        console.error(error)
      }

      //   then(async (va) => {
      //     console.log(va)
      //     // this.obj.choiceState = 1
      //     // 调用接口
      //     // const res1 = await questionChoice(this.obj)

      //     console.log(obj)
      //     // console.log(res1)

      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     })
      //   })

      //   const res = this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).catch(err => err)

      //   //
      //   if (res === 'cancel') return this.$message('取消加入精选')

      //   console.log(res)
      //   this.obj.choiceState = 1

      // 调用接口
      //   const res1 = await questionChoice(this.obj)
      //   console.log(obj)
      //   console.log(res1)
      //   this.$message({
      //     type: 'success',
      //     message: '加入成功!'
      //   })
    },

    // 搜索试题
    async searchQuestionFn () {
    //   调用 获取 基础题库列表 接口 API
      this.query.page = 1
      const res = await questionsList({
        ...this.query,
        ...this.questionsListForm
      })

      this.questionsTableData = res.data.items

      this.total = res.data.counts
      // 赋值 基础题库列表 Table列表
      // 通过学科列表搜索
      //   const res1 = res.data.items.find(item => item.subjectID === this.questionsListForm.subjectID * 1)
      //   console.log(res1)

      // 通过关键字搜索
      //   const res2 = res.data.items.find(item => item.question === this.questionsListForm.keyword)
      //   console.log(res2)
      //   this.questionsTableData.push(res2)

      //   const quesList = res.data.items.map(item => html2Text(item.question))
      //   console.log(quesList)
      //   const res3 = quesList.includes(this.questionsListForm.keyword)
      //   console.log(res3)

      //   if (res1) {
      //     // 将基础题库列表 Table列表置空 push进去筛选处理的数据项
      //     this.questionsTableData = []
      //     this.questionsTableData.push(res1)
      //     // this.questionsTableData.push(res2)

      //     // 赋值总数据数
      //     this.total = this.questionsTableData.length
      //   } else {
      //     this.questionsTableData = []

    //     this.total = 0
    //   }
    }
  }
}

</script>

<style scoped>
  .container {
    padding: 10px;
  }

  .row-bg.el-row.is-justify-space-between.is-align-middle.el-row--flex {
    margin-bottom: 10px;
  }

  .el-pagination.is-background {
    margin-top: 20px;
  }

  .elRight {
    text-align: right;
  }

  .row-bg {
    text-align: right;
  }

button.el-button.addques.el-button--success.el-button--medium {
    width: 97px;
    height: 32.5px;
    font-size: 12px;
    padding: 0;
}

.grid-content.bg-purple {
    float: left;
}

form.el-form {
    padding-top: 15px;
}
</style>
